<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Online格式化</title>
    <link href="./libs/style/bootstrap-4.5.2.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css" media="screen">
        body {
            overflow: hidden;
        }
    </style>
    <script src="./libs/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./libs/js/bootstrap-4.5.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./libs/ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="./libs/js/clipboard.min.js"></script>
    
    <script src="./libs/js/sql-formatter.min.js"></script>
    <script src="./libs/js/common.js"></script>

    <script src="./libs/js/require.min.js"></script>
</head>

<body>
    <p />
    <div class="container">
        <div class="card text-center">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" id="v-pills-json-tab" data-toggle="pill" href="#v-pills-json" role="tab" aria-controls="v-pills-json" aria-selected="true">JSON格式化</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="v-pills-sql-tab" data-toggle="pill" href="#v-pills-sql" role="tab" aria-controls="v-pills-sql" aria-selected="false">SQL格式化</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="v-pills-javascript-tab" data-toggle="pill" href="#v-pills-javascript" role="tab" aria-controls="v-pills-javascript" aria-selected="false">Javascript格式化</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="v-pills-html-tab" data-toggle="pill" href="#v-pills-html" role="tab" aria-controls="v-pills-html" aria-selected="false">HTML格式化</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="v-pills-css-tab" data-toggle="pill" href="#v-pills-css" role="tab" aria-controls="v-pills-css" aria-selected="false">CSS格式化</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="v-pills-xml-tab" data-toggle="pill" href="#v-pills-xml" role="tab" aria-controls="v-pills-xml" aria-selected="false">XML格式化</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="tab-content" id="v-pills-tabContent" style="margin-left:10px;">
                            <div class="tab-pane fade show active" id="v-pills-json" role="tabpanel" aria-labelledby="v-pills-json-tab">
                                <pre class="editor" id="jsonEditor" style="min-height:430px;"></pre>
                            </div>
                            <div class="tab-pane fade" id="v-pills-sql" role="tabpanel" aria-labelledby="v-pills-sql-tab">
                                <pre class="editor" id="sqlEditor" style="min-height:430px;"></pre>
                            </div>
                            <div class="tab-pane fade" id="v-pills-javascript" role="tabpanel" aria-labelledby="v-pills-javascript-tab">
                                <pre class="editor" id="javascriptEditor" style="min-height:430px;"></pre>
                            </div>
                            <div class="tab-pane fade" id="v-pills-html" role="tabpanel" aria-labelledby="v-pills-html-tab">
                                <pre class="editor" id="htmlEditor" style="min-height:430px;"></pre>
                            </div>
                            <div class="tab-pane fade" id="v-pills-css" role="tabpanel" aria-labelledby="v-pills-css-tab">
                                <pre class="editor" id="cssEditor" style="min-height:430px;"></pre>
                            </div>
                            <div class="tab-pane fade" id="v-pills-xml" role="tabpanel" aria-labelledby="v-pills-xml-tab">
                                <pre class="editor" id="xmlEditor" style="min-height:430px;"></pre>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" style="display:none">
                        <div class="tab-content" style="margin-left:10px">
                            <div class="editor" id="output" style="min-height:430px;"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div style="margin:10px 20px; text-align:left;">
                            <a class="btn btn-primary btn-large" href="javascript:void(0);" id="submitFormat">格式化</a>
                            <a class="btn btn-secondary btn-large" href="javascript:void(0);" data-clipboard-action="copy" id="btnCopy">Copy to clipboard</a>
                        </div>
                        <p id="msg"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function showmsg(type, msg) {
            $('#msg').removeClass("bg-danger").removeClass("bg-success").addClass("bg-" + type).text(msg);
        }

        var languages = ["json", "sql", "javascript", "html", "css", "xml"];
        var snippets = ["{'test':'fe','fe':1}", "select * from table", "function d(){}", "<div><span>sdf</span> <p>f</p></div>", "body { overflow: hidden; }", "<xml><test>sd</test></xml>"]
        var editors = [];
        var the = {
            beautifier: null
        };

        //初始化ACE插件
        function initSqlEditor() {
            //ACE API文档：https://ace.c9.io/#api=editor&nav=api
            //启用提示菜单
            var langTools = ace.require('ace/ext/language_tools');
            for (var i = 0; i < languages.length; i++) {
                var language = languages[i];
                var editor = ace.edit(language + "Editor");
                editor.setTheme("ace/theme/twilight");
                editor.session.setMode("ace/mode/" + language);
                editor.setFontSize(16);
                //设置行高
                document.getElementById(language + 'Editor').style.lineHeight = '25px';
                //设置只读
                //editor.setReadOnly(true);
                editor.setOptions({
                    //以下三行是设置输入代码提示的配置
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: false
                });
                //设置编辑器内容发生改变时，弹出自动补全内容
                editor.on('change', function(e, f) {
                    editor.execCommand('startAutocomplete');
                });
                editor.setValue(snippets[i]);
                editor.focus();
                //设置代码折叠
                editor.session.setUseWrapMode(true);
                let _comp_cfg = [{
                    name: "forEach", //显示的名称，‘奖金’
                    value: "forEach((v,k)=>{})", //插入的值，‘100’
                    caption: "fe", //这才是关键字
                    score: 100, //分数，越大的排在越上面
                    meta: "遍历" //描述，‘我的常量
                }]

                ace.config.loadModule("ace/ext/language_tools", function(module) {
                    module.addCompleter({
                        getCompletions: function(editor, session, pos, prefix, callback) {
                            if (prefix.length === 0) {
                                callback(null, []);
                                return
                            }
                            callback(null, _comp_cfg);
                        }
                    });
                });

                //function
                // var v = editor.getValue();// 获取编辑内容
                //editor.setValue("string "); // 设置编辑内容
                //require("lib/ace"); ##引入
                //editor.setTheme("ace/theme/solarized_dark");##设置模板；引入theme-solarized_dark.js模板文件
                //editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
                //editor.setValue("the new text here");##设置内容
                //editor.getValue(); ##取值
                //editor.session.getTextRange(editor.getSelectionRange()); ##获取选择内容
                //editor.insert("Something cool"); ##在光标处插入
                //editor.selection.getCursor(); ##获取光标所在行或列
                //editor.gotoLine(lineNumber); ##跳转到行
                //editor.session.getLength(); ##获取总行数
                //editor.getSession().setTabSize(4); ##设置默认制表符的大小
                //editor.getSession().setUseSoftTabs(true); ##使用软标签.
                //document.getElementById('editor').style.fontSize='12px';  ##设置字体大小
                //editor.getSession().setUseWrapMode(true); ##设置代码折叠
                //editor.setHighlightActiveLine(false); //设置高亮
                //editor.setShowPrintMargin(false); ##设置打印边距可见度

                editors[i] = editor;
            }

        }

        //设置ACE编辑器的值
        function setEditorValue(editor, strValue) {
            editor.setValue(strValue);

            //清除选择区域
            editor.clearSelection();
            editor.focus();
        }

        $(function() {
            require.config({
                baseUrl: "libs/js",
                paths: {
                    "beautifier": "beautifier"
                }
            });
            require(['beautifier'], function(beautifier) {
                the.beautifier = beautifier;
            })
            initSqlEditor();
            
            var clipboard = new ClipboardJS('#btnCopy', {
                text: function() {
                    var arrTabId = $("a[data-toggle='pill'][aria-selected='true']").attr("id").split("-");
                    var index = languages.indexOf(arrTabId[arrTabId.length - 2]);
                    return editors[index].getValue();
                }
            });
            clipboard.on('success', function(e) {
                console.log(e);
            });

            clipboard.on('error', function(e) {
                console.log(e);
            });

            //setEditorValue(testSql);

            $('#submitFormat').on('click', function() {
                var arrTabId = $("a[data-toggle='pill'][aria-selected='true']").attr("id").split("-");
                var index = languages.indexOf(arrTabId[arrTabId.length - 2]);
                var editor = editors[index];
                //获取ACE编辑器的值
                var editorValue = editor.getValue();

                switch (languages[index]) {
                    case "json":
                        //格式化SQL语句
                        var json = formatJson(editorValue);

                        setEditorValue(editor, json);
                        showmsg('success', '成功');
                        //showmsg('danger', data.error);
                        break;
                    case "sql":
                        //格式化SQL语句
                        var formatSql = sqlFormatter.format(editorValue, {
                            language: 'sql',
                            indent: '    '
                        });

                        setEditorValue(editor, formatSql);
                        showmsg('success', '成功');
                        //showmsg('danger', data.error);
                        break;
                    case "javascript":
                        formatJS = the.beautifier.js(editorValue);
                        setEditorValue(editor, formatJS);
                        showmsg('success', '成功');
                        break;
                    case "html":
                        formatHtml = the.beautifier.html(editorValue);
                        setEditorValue(editor, formatHtml);
                        showmsg('success', '成功');
                        break;
                    case "css":
                        formatCss = the.beautifier.css(editorValue);
                        setEditorValue(editor, formatCss);
                        showmsg('success', '成功');
                        break;
                    case "xml":
                        xml = formateXml(editorValue);
                        setEditorValue(editor, xml);
                        showmsg('success', '成功');
                        break;
                }
            });
        });
    </script>

</body>

</html>